<template>
  <div class="infinite-container bg-sitify">
    <ul class="list bgwhite" v-if="list.length > 0">
      <li v-for="(item, i) in list" :key="i" @click="gotoDetail(item)">
        <div class="list-title">
          <div>
            {{item.questionnaireName | safeSlice(10)}}
            <span
              class="t3 f12"
              v-if="item.satisfactionStatus == 2"
            >已参加</span>
            <span class="t5 f12" v-else>未参加</span>
          </div>
          <div class="list-sub">
            {{item.patientName}} &nbsp;&nbsp;&nbsp;
            {{item.departmentName}} &nbsp;&nbsp;&nbsp;
            {{item.recordsTime | format}}
          </div>
        </div>
        <div class="list-action">
          <div class="label label-bordered" v-if="item.satisfactionStatus == 2">查看</div>
          <div class="label label-primary" v-else>参与调查</div>
        </div>
      </li>
    </ul>
    <div class="not-found" v-else>
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "@/api/api";

export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.geSatistList();
    },

    // 获取列表
    geSatistList() {
      
      commonAjaxJson(
        RESTFUL_API.geSatistList,
        {
          type: 0,
          uid: sessionStorage.getItem("userId"),
          pageNo: 1,
          pageSize: 999
        },
        true
      ).then(res => {
        
        if (res.data.code == 200) {
          this.list = res.data.data.satisfactionList;
        }
      });
    },

    // 详情
    gotoDetail(item) {
      this.$router.push(
        "/questionnaire/answer?fusPlanExecutionListId=" +
          item.fusPlanExecutionListId
      );
    }
  }
};
</script>
<style lang="less" scoped>
.bg-sitify {
  background: url(../../assets/myddc_bg_banner.png) no-repeat;
  padding-top: 140px;
  background-size: 100%;
}
.list {
  margin: 16px;
  border-radius: 10px;
  li {
    display: flex;
    padding: 10px;
    &:hover {
      background: #f2f2f2;
    }
    .list-title {
      flex: 1;
      font-size: 16px;
    }
    .list-sub{
      font-size: 14px;
      color: #666;
      margin-top: 6px;
    }
  }
}
.list-action {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  .label {
    display: block;
    border-radius: 2px;
    padding: 2px 6px;
    width: 70px;
    text-align: center;
    &.label-primary {
      background: #34bb70;
      color: #fff;
    }
    &.label-bordered {
      border:1px solid  #34bb70;
      color: #34bb70;
    }
  }
}
</style>
